<!DOCTYPE html>
<!-- saved from url=(0052)http://getbootstrap.com/docs/4.0/examples/dashboard/ -->
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>学生成绩信息管理系统</title>
    <!-- Bootstrap core CSS -->
    <link href="asserts/css/bootstrap.min.css" th:href="@{/webjars/bootstrap/4.0.0/css/bootstrap.css}" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="asserts/css/dashboard.css" th:href="@{/asserts/css/dashboard.css}" rel="stylesheet">

    
    <style type="text/css">
        /* Chart.js */

        @-webkit-keyframes chartjs-render-animation {
            from {
                opacity: 0.99
            }
            to {
                opacity: 1
            }
        }

        @keyframes chartjs-render-animation {
            from {
                opacity: 0.99
            }
            to {
                opacity: 1
            }
        }

        .chartjs-render-monitor {
            -webkit-animation: chartjs-render-animation 0.001s;
            animation: chartjs-render-animation 0.001s;
        }        
       
    </style>
</head>

<body>
<!--引入抽取的topbar-->
<!--模板名：会使用thymeleaf的前后缀配置规则进行解析-->
<div th:replace="commons/admbar::topbar"></div>

<div class="container-fluid">
    <div class="row">
        <!--引入侧边栏-->
        <div th:replace="commons/admbar::#sidebar(activeUri='index')"></div>

        <main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
            <div class="jumbotron jumbotron-fluid">
                <div id="chart" style="width: 600px;height:400px;"></div>
            </div>
        </main>

    </div>
</div>

    
    <script type="text/javascript" src="asserts/js/jquery.min.js" th:src="@{/asserts/js/jquery.min.js}"></script>
    <!-- 引入 echarts.js -->
    <script type="text/javascript" src="asserts/js/echarts.min.js" th:src="@{/asserts/js/echarts.min.js}"></script>
    
    <script>
    var myChart = echarts.init(document.getElementById('chart'));
    

    $.get("./json/rada.json", function (radata) {
    			console.log(radata);
    			console.log(radata[0]);
    			
                option = {
                    baseOption: {
                        title : {
                            text: '',
                            subtext: '这其实是一个假数据!',
                            x:'center'
                            
                        },
                        tooltip : {
                            trigger: 'item',
                            formatter: "{a} <br/>{b} : {c} ({d}%)"
                        },
                        legend: {
                            data:['rose1','rose2','rose3','rose4','rose5','rose6','rose7','rose8']
                        },
                        toolbox: {
                            show : true,
                            feature : {
                                mark : {show: true},
                                dataView : {show: false, readOnly: false},
                                magicType : {
                                    show: true,
                                    type: ['pie', 'funnel']
                                },
                                restore : {show: false},
                                saveAsImage : {show: false}
                            }
                        },
                        calculable : true,
                        series : [
                            
                            {
                                name:'面积模式',
                                type:'pie',
                                roseType : 'area',
                                data:[
                                    {value:10, name:'rose1'},
                                    {value:5, name:'rose2'},
                                    {value:15, name:'rose3'},
                                    {value:25, name:'rose4'},
                                    {value:20, name:'rose5'},
                                    {value:35, name:'rose6'},
                                    {value:30, name:'rose7'},
                                    {value:40, name:'rose8'}
                                ]
                            }
                        ]
                    }
              
                };
                myChart.setOption(option);

            });
    </script>
</body>
</html>